<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>
            /**
            * 3.使用js在界面上绘制如下内容。要求如下：
        
            1.如果乘积为奇数则对应的矩形背景色为蓝色
            2.如果乘积为偶数则对应的矩形背景为绿色。
            3.不使用table，整体形状为倒等腰三角形
            */
        </p>
        <img src="./图片1.png" alt="">
    </div>
    <div style="position: relative;" id="contain">

    </div>    
    <script>
        let divContain=document.getElementById("contain");
        let width=80;
        let height=30;
        for (let i = 9; i >= 1; i--) {
            for (let j = 1; j <= i; j++) {
                let dom = document.createElement("div");
                // dom.style.position="absolute";
                // dom.style.width="100px";
                // dom.style.height="50px";
                // dom.style.border="1px solid white"
                // dom.style.textAlign="center";
                dom.className="divclass"
                dom.style.backgroundColor = i * j % 2 == 1 ? "blue" : "green";
                dom.style.top = (9 - i) * height + "px";
                dom.style.left = (j * width + (9 - i) * width/2) + "px";
                dom.innerHTML = `${i}*${j}=${i * j}`;
                divContain.appendChild(dom);
            }
        }
    </script>

</body>
<style>
    .divclass {
        position: absolute;
        text-align: center;
        line-height: 30px;
        width: 80px;
        height: 30px;
        border: 1px solid white;
    }
</style>

</html>